<template>
  <div class="mailingitinerary">
    <el-form :model="results" :inline="true" size="mini" ref="ruleForm" label-width="100px">
      <div>
        <el-form-item label="订单号">
          <el-input v-model="results.orderId"></el-input>
        </el-form-item>
        <el-form-item label="运单是否匹配">
          <el-select clearable v-model="results.waybillIsMatch">
            <el-option :label="item.label" v-for="(item, index) in waybill" :key="index" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起飞时间">
          <el-date-picker value-format="yyyy-MM-dd" v-model="results.departureTime" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到达时间">
          <el-date-picker value-format="yyyy-MM-dd" v-model="results.departureTimeEnd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </div>
      <div style="margin-left:45%">
        <el-form-item>
          <el-button type="primary" @click="viewBillDetails">查询</el-button>
        </el-form-item>
         <el-form-item>
           <el-button>
        <download-excel class="blueBtn" :data="tableData" :fields="json_fields"  name="机票行程单列表">
          导出
        </download-excel>
        </el-button>
      </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData"
      :header-cell-style="{ color: '#fff', background: '#6090EC', fontSize: '11px', fontWeight: 'normal'}" size="mini"
      border class="account_table">
      <el-table-column prop="orderId" label="订单号" width="150">
      </el-table-column>
      <el-table-column label="订单状态" width="100">
        <template slot-scope="scope">
          {{scope.row.orderStatus | orderStatus}}
        </template>
      </el-table-column>
      <el-table-column label="配送状态" width="100">
        <template slot-scope="scope">
          <!-- <template v-if="scope.row.assignStatus==1">预定</template> -->
          <template v-if="scope.row.assignStatus=='waitDelivered'">待配送</template>
          <template v-if="scope.row.assignStatus=='hasDelivered'">已配送</template>
          <!-- <template v-if="scope.row.assignStatus==4">取消</template> -->
        </template>
      </el-table-column>
      <el-table-column prop="passengerName" label="乘机人姓名" width="120">
      </el-table-column>
      <el-table-column  label="收件人" prop="contactName" width="120"></el-table-column>
      <el-table-column prop="contactPhone" label="收件人手机号" width="120"></el-table-column>
      <el-table-column prop="contactAddress" label="收件人详细地址"></el-table-column>
      <el-table-column label="快递单号" width="200">
        <template slot-scope="scope">
          <el-input type="textarea" v-model="scope.row.postId" :rows="1" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="200">
        <template slot-scope="scope">
          <el-input type="textarea" v-model="scope.row.postRmk" :rows="1" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-popconfirm title="确认提交吗" @confirm="backfillconfirm">
            <el-button slot="reference" type="primary" size="mini" @click="submit(scope.row)">提交</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="results.pageNo"
        :page-sizes="[10, 15, 20]" :page-size="results.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'mailingitinerary',
    data() {
      return {
          json_fields: {
            订单号:"orderId",
            订单状态:"orderState",
            乘机人姓名:"passengerName",
            收件人手机号:"contactPhone",
            收件人详细地址:"contactAddress",
            快递单号:"postId",
            备注:"postRmk",
         
        },
        // 订单号
        ordernumber: {},
        // 备注
        postRmk: "",
        // 运单号
        postId: "",
        // 分页
        pageTotal: 0,
        // 表格数据
        tableData: [],
        // 查询条件
        results: {
          orderId:"",
          waybillIsMatch:"no",
          pageNo: 1,
          pageSize: 10,
          departureTime: new Date(new Date() - (3600 * 1000 * 24 * 31 + 1000))
          .toLocaleDateString()
          .replace(/\//g, "-"),
          departureTimeEnd: new Date(new Date()).toLocaleDateString().replace(/\//g, "-"),
        },
        waybill: [{
            value: "",
            label: "全部"
          },
          {
            value: "no",
            label: "未匹配"
          },
          {
            value:"yes",
            label: "已匹配"
          },
        ]
      }
    },
    methods: {
       // 提交确认的回调
       backfillconfirm() {
        if(this.ordernumber.postId!=null){
            this.getupdateDeliverAssignByOrderId()
        }else{
          this.$message({
          message: '请填写快递单号或备注后提交',
          type: 'warning'
        });
        }
      },
      // 回填快递单号及备注
      getupdateDeliverAssignByOrderId(){
        this.$axios.getupdateDeliverAssignByOrderId({
          assignId: this.ordernumber.assignId,
          postRmk: this.ordernumber.postRmk,
          postId: this.ordernumber.postId
        }).then((res)=>{
          console.log(res)
          if(res.code=="00000"){
            this.$message({
          message: '回填成功',
          type: 'success'
        });
            this.getorderIternaryList()
          }
        })
      },
      // 列表接口
      getorderIternaryList() {
        this.$axios.getorderIternaryList(this.results).then((res) => {
          if (res.code == "00000") {
            this.tableData=res.data.records;
            this.pageTotal=res.data.total;
          }
        })
      },
     
      // 查询按钮
      viewBillDetails() {
        this.getorderIternaryList()
      },
      // 提交按钮
      submit(row) {
        this.ordernumber = row
      },
      // 分页
      handleSizeChange(value) {
        this.results.pageSize = value;
        this.getorderIternaryList();
      },
      handleCurrentChange(value) {
        this.results.pageNo = value
        this.getorderIternaryList();
        // orders = res.data;
      },
    },
    mounted() {
      this.getorderIternaryList()
    },
  }
</script>

<style scoped>
  .mailingitinerary {
    margin: 20px;
  }
</style>